<template>
	<div id="app" @contextmenu.prevent="openContextMenu">
		<CustomContextMenu ref="contextMenu" />
		<Loading></Loading>
		<Header v-if="headerShow"></Header>
		<!-- 是否进行缓存 -->
		<!-- <keep-alive>
			<router-view v-if="iSkeepAlive" />
		</keep-alive> -->
		<router-view />
		<div v-if="footerShow">
			<div v-if="isShowFooter">
				<Footer></Footer>
			</div>
		</div>
		<aipop v-if="$store.state.aipopIsShow" ref="AiDialogue"></aipop>
		<customerService v-if="$store.state.customShow"></customerService>
		 <div class="customer_icon" @click="showCustomerServiceMethod" v-if="!$store.state.customShow">
			<i class="el-icon-chat-dot-round"></i>
		 </div>
	</div>
</template>
<script>
	import CustomContextMenu from './components/customContextMenu/CustomContextMenu.vue'
	import Loading from './components/loading/Loading.vue'
	import Header from './components/Home-Herder/header.vue'
	import Footer from './components/Footer/Footer.vue'
	import aipop from './components/aipop/aipop'
	import customerService from './components/customerService/customerService'
	export default {
		components: {
			Header,
			Footer,
			Loading,
			CustomContextMenu,
			aipop,
			customerService
		},
		data() {
			return {
				isShowFooter: true,
				devtoolsOpened: false,
				showCustomerService:false
			}
		},
		created() {
			const store = this.$store
			// store.dispatch('startWebSocket');
			// 解决vuex刷新后清空问题
			if (localStorage.getItem("TOKEN")) {
				if (sessionStorage.getItem("store")) {
					this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem(
						"store"))))
				}
			}
			
			window.addEventListener("beforeunload", () => {
				store.dispatch('clearWebSocket');
				sessionStorage.setItem("store", JSON.stringify(this.$store.state))
			})

			// 生产环境生效
			if (process.env.NODE_ENV === "production") {
			this.disableDevTools();
			}
		},
		mounted() {
			window.addEventListener('click', this.closeContextMenu);
			// this.$nextTick(() => {
			// 	// console.log(this.iSkeepAlive);
			// 	// console.log(this.$route.meta.iSkeepAlive);
			// })
			// console.log(this.$store);
			// this.IsShow=this.$route.meta.show
			// clearTimeout(show);
			// var show = setTimeout(() => {
			// 	this.isShowFooter = true
			// }, 1000)


			let beginTime = 0; //开始时间
			let differTime = 0; //时间差
			window.onunload = function () {
				differTime = new Date().getTime() - beginTime;
				if (differTime <= 5) {
					console.log("这是关闭");
					localStorage.removeItem("TOKEN")
					//退出登录跳到首页
					this.$router.push({
						path: "/"
					});
				} else {
					console.log("这是刷新");
				}
			};

			window.onbeforeunload = function () {
				beginTime = new Date().getTime();
			};
			// this.$router.beforeEach((to, form, next) => {
			// 	this.IsShow = to.meta.show
			// 	console.log(to.meta.show);
			// 	next()
			// })

		},
		//  路由跳转读取meta 判断是否显示     
		computed: {
			headerShow() {
				return this.$route.meta.headerShow;
			},
			footerShow() {
				return this.$route.meta.footerShow;
			},
			iSkeepAlive() {
				return this.$route.meta.iSkeepAlive;
			}
		},
		methods: {
			showCustomerServiceMethod(){
				// console.log(11111);
				
				if(this.$store.state.token==null || this.$store.state.token==""){
						this.$message.warning("请先登录,才能联系到客服哦~")
						return
				}
				this.$store.dispatch("customSHow")
			},
			createAudio() {
				let audio = document.createElement('audio');
				audio.controls = true
				audio.autoplay = true
				const source = document.createElement('source');
				source.src = 'https://blog-chen.oss-cn-shanghai.aliyuncs.com/F12/f12_Vocal.mp3';
				source.type = 'audio/mpeg';
				audio.appendChild(source);
				audio.style.position = 'absolute';
				audio.style.left = '-9999px';
				audio.style.top = '-9999px';
				audio.style.width = '0';
				audio.style.height = '0';
				audio.style.overflow = 'hidden';
				document.body.appendChild(audio);
				setTimeout(() => {
					audio.remove()
				}, 3000)
			},
			disableDevTools() {
				debugger
				// 禁用F12
				document.addEventListener('keydown', (event) => {
					if (event.keyCode === 123) {
						// https://blog-chen.oss-cn-shanghai.aliyuncs.com/F12/f12.mp4
						// https://blog-chen.oss-cn-shanghai.aliyuncs.com/F12/f12_Vocal.mp3
						this.createAudio()
						event.preventDefault();
					}
				});
				// 禁用Ctrl+Shift+I
				document.addEventListener('keydown', (event) => {
					if (event.ctrlKey && event.shiftKey && event.keyCode === 73) {
						this.createAudio()
						event.preventDefault();
					}
				});
				// // 3.禁止进入调试模式
				// setInterval(function () {
				// 	check()
				// }, 1000);
				// var check = function () {
				// 	function doCheck(a) {
				// 		if (("" + a / a)["length"] !== 1 || a % 20 === 0) {
				// 			(function () { }
				// 			["constructor"]("debugger")())
				// 		} else {
				// 			(function () { }
				// 			["constructor"]("debugger")())
				// 		}
				// 		doCheck(++a)
				// 	}
				// 	try {
				// 		doCheck(0)
				// 	} catch (err) { }
				// };

			},
			openContextMenu(event) {
				this.$refs.contextMenu.openMenu(event);
			},
			closeContextMenu() {
				this.$refs.contextMenu.closeMenu();
			},
		},
		watch: {
			$route(newVal, obl) {
				this.$store.dispatch("aiHide")
			}
		},
		beforeDestroy() {
			window.removeEventListener('click', this.closeContextMenu);
			// 当组件销毁前，移除事件监听器
			document.removeEventListener('keydown', (event) => {
				if (event.keyCode === 123) {
					event.preventDefault();
				}
			});

			document.removeEventListener('keydown', (event) => {
				if (event.ctrlKey && event.shiftKey && event.keyCode === 73) {
					event.preventDefault();
				}
			});
		},
	}
</script>


<style lang="less">
	::-webkit-scrollbar {
		/*滚动条整体样式*/
		width: 8px;
		/*高宽分别对应横竖滚动条的尺寸*/
		height: 8px;
	}

	::-webkit-scrollbar-thumb {
		/*滚动条里面小方块*/
		border-radius: 5px;
		/* // box-shadow: inset 0 0 5px rgba(73, 177, 245); */
		background: rgb(73, 177, 245);
	}

	::-webkit-scrollbar-track {
		/*滚动条里面轨道*/
		/* // box-shadow: inset 0 0 5px rgba(73, 177, 245); */
		border-radius: 5px;
	}

	body {
		cursor: url(https://blog-chen.oss-cn-shanghai.aliyuncs.com/mp4/default.cur), default;
	}

	* {
		margin: 0;
		padding: 0;
	}


	.customer_icon{
		position: fixed;
		background-color: #FFF;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 20px;
		box-shadow: 0 0 10px gainsboro;
		cursor: pointer;
		z-index: 1000;
		color: rgb(73, 177, 245);
		right: 36px;
		bottom: 30px;
	}
</style>